<style>
    .ui-main > .el-divider .el-divider__text {
        background: #F2F2F2;
    }

    .ui-main > h3 {
        padding-left: 20px;
        font-size: 20px;
        border-left: 2px solid #409EFF;
        margin-left: 10px;
    }
</style>
<template>
    <ly-page>
        <ly-navi type="title" title="分页器"></ly-navi>

        <ly-page-content>
            <el-divider content-position="left">默认</el-divider>
            <el-table :data="store.data" v-loading="store.loading">
                <el-table-column label="id" prop="id">
                </el-table-column>
                <el-table-column label="名称" prop="name">
                </el-table-column>
            </el-table>
            <ly-pagination :store="store"></ly-pagination>
            <el-divider content-position="left">带操作区</el-divider>
            <el-table :data="store.data" v-loading="store.loading">

                <el-table-column label="id" prop="id">
                </el-table-column>
                <el-table-column label="名称" prop="name">
                </el-table-column>
            </el-table>
            <ly-pagination :store="store">
                <el-button type="primary" size="mini">选择1</el-button>
                <el-button type="primary" size="mini">选择2</el-button>
                <el-button type="primary" size="mini">选择3</el-button>
            </ly-pagination>
            <el-divider content-position="left">带全选框</el-divider>
            <ly-tip>全选checkbox 会根据相连的 el-table是否包含全选checkbox显示</ly-tip>
            <el-table :data="store.data" v-loading="store.loading">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="id" prop="id">
                </el-table-column>
                <el-table-column label="名称" prop="name">
                </el-table-column>
            </el-table>
            <ly-pagination :store="store">
                <el-button type="primary" size="mini">选择1</el-button>
                <el-button type="primary" size="mini">选择2</el-button>
                <el-button type="primary" size="mini">选择3</el-button>
            </ly-pagination>
            <el-divider content-position="left">带边框</el-divider>
            <ly-tip>边框会根据相连的 el-table是否是有边框的模式进行显示</ly-tip>
            <el-table border :data="store.data" v-loading="store.loading">
                <el-table-column
                        type="selection"
                        width="45">
                </el-table-column>
                <el-table-column label="id" prop="id">
                </el-table-column>
                <el-table-column label="名称" prop="name">
                </el-table-column>
            </el-table>
            <ly-pagination :store="store">
                <el-button type="primary" size="mini">选择1</el-button>
                <el-button type="primary" size="mini">选择2</el-button>
                <el-button type="primary" size="mini">选择3</el-button>
            </ly-pagination>


            <el-divider content-position="left">当只有一页时隐藏分页</el-divider>
            <ly-tip>当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。</ly-tip>
            <el-form :inline="true" size="small">
                <el-form-item label="总数量">
                    <el-input-number v-model="store.total" size="small" v-model="num" :min="3"  ></el-input-number>
                </el-form-item>
            </el-form>


            <el-table border :data="store.data" v-loading="store.loading">
                <el-table-column
                        type="selection"
                        width="45">
                </el-table-column>
                <el-table-column label="id" prop="id">
                </el-table-column>
                <el-table-column label="名称" prop="name">
                </el-table-column>
            </el-table>
            <ly-pagination :store="store" hide-on-single-page>
                <el-button type="primary" size="mini">选择1</el-button>
                <el-button type="primary" size="mini">选择2</el-button>
                <el-button type="primary" size="mini">选择3</el-button>
            </ly-pagination>

            <ly-code-view>
             <pre v-pre>
<ly-pagination :store="store">
    <el-button type="primary" size="mini">选择1</el-button>
    <el-button type="primary" size="mini">选择2</el-button>
    <el-button type="primary" size="mini">选择3</el-button>
</ly-pagination>
             </pre>
            </ly-code-view>
            <ly-markdown>
                <pre v-pre>

## `ly-pagination`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  store | 关联的 Ly.DataSource	  |Ly.DataSource |-	|-	|
|hide-on-single-page|当只有一页时隐藏|boolean|-|false|
|layout|el的分页布局|string|-|total,sizes,prev, pager, next, jumper|




                </pre>
            </ly-markdown>
        </ly-page-content>
    </ly-page>
</template>
<script>
    //这里定义组件
    Rap.define([], function () {
        return {
            data: function () {
                var store = Ly.dataStore({
                    data: function () {
                        return [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}];
                    }
                });
                store.load(1);
                return {
                    store: store

                }
            }, created: function () {

            }, init: function (query) {

            },
            methods: {}
        }
    })
</script>